// src/components/ScanLogin.tsx
import React, { useEffect } from 'react';
import { notification } from 'antd';
import './ScanLogin.less'; // 创建这个CSS文件以包含样式

const ScanLogin: React.FC = () => {
  useEffect(() => {
    // 加载 DingTalk JS SDK 或其他必要的脚本
    const script = document.createElement('script');
    script.src = 'https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js'; // 替换为真实的 SDK 路径
    script.onload = () => {
      // 初始化扫码登录
      window.DTFrameLogin(
        {
          id: 'self_defined_element',
          width: 300,
          height: 300,
        },
        {
          redirect_uri: 'http%3A%2F%2F47.107.63.143%3A8080%2Fuser%2Fusers%2Fauth',
          client_id: 'dingl7oimbjxovn7ccu1',
          scope: 'openid',
          response_type: 'code',
          prompt: 'consent',
        },
        (loginResult) => {
          const { redirectUrl, authCode } = loginResult;
          // // 这里可以直接进行重定向
          // window.location.href = redirectUrl;
          // // 也可以在不跳转页面的情况下，使用 code 进行授权
          // console.log(authCode);
          console.log("接收到钉钉扫码响应")
        },
        (errorMsg) => {
          // 这里一般需要展示登录失败的具体原因，可以使用 notification 等提示
          notification.error({
            message: '登录失败',
            description: `errorCbk: ${errorMsg}`,
          });
          console.error(`errorCbk: ${errorMsg}`);
        }
      );
    };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div id="self_defined_element" className="self-defined-classname"></div>
};

export default ScanLogin;
